<template>
  <div class="box">
    <div class="info">
      <div class="avatorMax">
        <img :src="singerInfo.avatar + '?param=300y300'" alt="" />
      </div>
      <div class="right">
        <div class="title">
          <h3>{{ singerInfo.name }}</h3>
        </div>
        <div class="button">
          <div class="collect" @click="subSinger" v-if="!isCreated">
            <i class="el-icon-star-off" :class="isSub ? 'isSubRed' : ''"></i>
            {{ isSub ? '已收藏' : '收藏' }}
          </div>
          <div class="share" @click="$message.warning('没用的按钮!')">
            个人首页
          </div>
        </div>
        <div class="tag">
          <div class="song">
            <span>单曲数: {{ singerInfo.musicSize }}</span>
            <span>专辑数: {{ singerInfo.albumSize }}</span>
            <span>MV数: {{ singerInfo.mvSize }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="list" ref="list">
      <el-tabs v-model="activeId" @tab-click="handleClick">
        <el-tab-pane
          label="专辑"
          name="1"
          class="tableBox"
          v-infinite-scroll="load"
          :infinite-scroll-disabled="disabled"
          infinite-scroll-immediate="false"
        >
          <rankingBox
            :officialListDetailItem="topSongs"
            @getSongIdAndIndex="getSongIdAndIndex"
            :cover="require('/src/assets/img/topSongsLogo.png')"
            :listId="this.$route.query.id.toString()"
            @handleMoreClick="handleMoreClick"
            :openType="openType"
          ></rankingBox>
          <div class="albumItemContainer">
            <div
              class="albumItem"
              v-for="(item, index) in singerAlbum"
              :key="index"
            >
              <rankingBox
                :officialListDetailItem="item.songsObj"
                @getSongIdAndIndex="getSongIdAndIndex"
                :cover="item.album.blurPicUrl + '?param=300y300'"
                :listId="item.album.id.toString()"
                @handleMoreClick="handleMoreClick"
              ></rankingBox>
            </div>
          </div>
          <el-backtop ref="tableBox" target=".tableBox"></el-backtop>
        </el-tab-pane>
        <el-tab-pane label="MV" name="2">
          <MvCardItem
            v-if="singerMvInfo"
            :videoList="singerMvInfo"
            @clickMvItem="clickMvItem"
            @bottomLoad="bottomLoad"
            :videoType="'singerMv'"
            :isLoad="true"
          ></MvCardItem>
        </el-tab-pane>
        <el-tab-pane label="歌手详情" name="3">
          <p class="singer">{{ singerInfo.briefDesc }}</p>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>
<script>
import {
  getSingerInfo,
  getSingerTopSongs,
  getAlbumInfo,
  getAlbumDetail,
  collectSinger,
  getCollentSinger,
  getSingerMvDetail
} from '@/api/discover/singerDetail'
import rankingBox from '@/views/Discover/disCoverChildren/components/rankingBox.vue'
import { handleMusicTime } from '@/plugins/utils'
import MvCardItem from './components/MvCardItem'
export default {
  data() {
    return {
      // 歌手详情
      singerInfo: {},
      // 是否收藏
      isSub: false,
      // 是否是创建的歌单 是创建的歌单不需要收藏按钮
      isCreated: true,
      activeId: '1',
      // 热门50首
      topSongs: {},
      // 歌手专辑
      singerAlbum: [],
      // 专辑页数
      albumPage: 1,
      // 没有更多
      disabled: false,
      isAlbumMore: false,
      openType: false, // top50点击查看更多
      // 歌手mv数据
      singerMvInfo: { mvs: [], hasMore: false },
      // mv页数
      videoPage: 1
    }
  },
  components: {
    rankingBox,
    MvCardItem
  },
  methods: {
    // 获取歌手信息
    async getSingerInfo() {
      const res = await getSingerInfo({
        id: this.$route.query.id
      })
      this.singerInfo = res.data.data.artist
      // console.log(this.singerInfo)
    },
    // 请求歌手热门50首歌曲
    async getSingerTopSongs() {
      const res = await getSingerTopSongs({
        id: this.$route.query.id
      })
      // console.log(res)
      let topSongs = res.data.songs
      topSongs.forEach((item, index) => {
        topSongs[index].dt = handleMusicTime(item.dt)
      })
      this.topSongs = { topSongs, isOPen: false }
      // console.log(this.topSongs)
    },
    // 请求专辑列表 再用专辑id查询专辑信息
    async getAlbumInfo() {
      let res = await getAlbumInfo({
        id: this.$route.query.id,
        limit: 20,
        offset: (this.albumPage - 1) * 20
      })
      this.isAlbumMore = res.data.more
      res = res.data.hotAlbums
      await res.forEach((item) => {
        this.getAlbumDetail(item.id)
      })
    },
    // 请求专辑详情信息
    async getAlbumDetail(id) {
      let res = await getAlbumDetail(id)
      // 将数组songs再保存一个对象格式，方便组件使用
      res = res.data
      let songs = res.songs
      // 处理歌单中歌曲的时间
      songs.forEach((item, index) => {
        songs[index].dt = handleMusicTime(item.dt)
      })
      res.songsObj = { songs }
      this.singerAlbum.push(res)
      // console.log(res)
    },
    // 双击播放
    getSongIdAndIndex({ id, index, listId }) {
      console.log(id, index)
      // 歌单id listId
      if (listId !== this.$route.query.id) {
        let musicListIndex = this.singerAlbum.findIndex(
          (item) => item.album.id == listId
        )
        // console.log(musicListIndex);
        this.$store.commit('updateMusicId', id)
        // 如果歌单发生变化,则提交歌单到vuex
        if (listId != this.$store.state.musicListId) {
          // 将歌单传到vuex
          this.$store.commit('updateMusicList', {
            musicList: this.singerAlbum[musicListIndex].songs,
            musicListId: listId
          })
        }
      } else {
        // 第几个歌单songIndex
        let songIndex = this.topSongs.topSongs.findIndex(
          (item) => item.id === id
        )
        console.log(songIndex)
        this.$store.commit(
          'updateMusicId',
          this.topSongs.topSongs[songIndex].id
        )
        if (id !== this.$store.state.musicListId) {
          this.$store.commit('updateMusicList', {
            musicList: this.topSongs.topSongs,
            musicListId: id
          })
        }
      }
    },
    // 触底加载
    load() {
      console.log('触底加载')
      this.disabled = true
      this.albumPage += 1
      this.getAlbumInfo()
    },
    // 查看更多
    handleMoreClick(id) {
      // console.log(id)
      let isId = this.singerAlbum.findIndex(
        (item) => item.album.id.toString() === id
      )
      if (isId !== -1) {
        // 找到了说明是点击查看更多专辑
        console.log(id)
        this.$router.push({ path: '/index/album', query: { id } })
      } else {
        // 否则点击查看top50
        this.openType = !this.openType
        if (this.openType === false) this.$refs.tableBox.$el.click()
      }
    },
    // 请求收藏的歌手列表
    async getSubSingerList() {
      let timestamp = Date.parse(new Date())
      let res = await getCollentSinger({
        limit: 1000,
        timestamp
      })
      // console.log(res.data.data)
      this.$store.commit('updateSubSingerList', res.data.data)
    },
    // 点击subSinger按钮的回调
    async subSinger() {
      if (!this.$store.state.isLogin) {
        this.$message.error('请先登录!')
        return
      }
      this.isSub = !this.isSub
      // 发送请求
      await collectSinger({
        id: this.$route.query.id,
        t: this.isSub ? 1 : 0
      })
      // 每次进行修改操作后，都需要更新vuex里面的收藏list
      if (this.isSub) {
        this.$message.success('收藏成功!')
      } else {
        this.$message.success('取消收藏成功!')
      }

      this.getSubSingerList()
    },
    // 判断是否是创建的歌单
    getIsCreated() {
      // console.log('是否创建')
      this.isCreated = this.$store.state.createdMusicList.find(
        (item) => item.id == this.$route.query.id
      )
    },
    // 判断用户是否收藏了该歌单
    getIsSub() {
      // console.log('是否收藏123')
      this.isSub = this.$store.state.subSingerList?.find(
        (item) => item.id == this.$route.query.id
      )
      // console.log(this.isSub)
    },
    // 获取歌手Mv
    async getSingerMvDetail() {
      const res = await getSingerMvDetail({
        id: this.$route.query.id,
        limit: 20 * this.videoPage
      })
      // console.log(res)
      this.singerMvInfo = res.data
      console.log(this.singerMvInfo, 'mv列表')
      this.$store.commit('updateSingerMvList', this.singerMvInfo)
      // console.log(this.singerMvInfo)
    },
    // 跳转mv
    clickMvItem(id) {
      if (!this.$store.state.isLogin) {
        this.$message.error('登录后才能观看MV哦!')
        return
      }
      // console.log(id, index, type)
      this.$router.push({
        path: '/index/VideoDetail',
        query: { id, type: 'mv' }
      })
    },
    // mv 触底加载
    async bottomLoad() {
      if (this.singerMvInfo.hasMore == true) {
        this.videoPage += 1
        this.getSingerMvDetail()
      }
    },
    async handleClick(tab) {
      if (tab.name === '2') {
        if (this.singerMvInfo.code) {
          return
        }
        // console.log('MV')
        await this.getSingerMvDetail()
        // console.log(this.singerMvInfo)
      } else if (tab.name === '3') {
        // console.log('歌手详情')
      }
    }
  },
  created() {
    this.getSingerInfo()
    this.getSingerTopSongs()
    if (this.$store.state.isLogin) {
      this.getIsCreated()

      if (!this.isCreated) {
        this.getIsSub()
      }
    }
  },
  async mounted() {
    this.getAlbumInfo()
    if (this.$store.state.isLogin) {
      // 判断是否收藏了该歌手
      if (this.$store.state.subSingerList == null) {
        await this.getSubSingerList()
      }
      this.getIsSub()
      // console.log(123)
    }
  },
  watch: {
    singerAlbum() {
      if (this.singerAlbum.length != 0 && this.isAlbumMore) {
        this.disabled = false
      } else {
        this.disabled = true
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.box {
  padding: 0 15px 0 15px;
}

.info {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  .avatorMax {
    img {
      width: 180px;
      height: 180px;
      background-color: pink;
      border-radius: 15px;
      margin-right: 15px;
    }
  }
  .right {
    .title {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      h3 {
        font-size: 25px;
        margin-top: -60px;
      }
    }

    .button {
      display: flex;
      align-items: center;
      margin-top: 10px;
      margin-bottom: 10px;

      .collect,
      .share {
        border: 1px solid #ccc;
        padding: 5px 15px;
        border-radius: 15px;
        color: #666;
        font-size: 14px;
        margin-right: 8px;
        cursor: pointer;
        &:hover {
          background-color: #f7f7f7;
        }
      }
    }
    .tag {
      display: flex;
      flex-direction: column;
      font-size: 14px;
      margin-left: 30px;
      color: #666;

      .song {
        margin: 3px 0;
        span {
          margin-right: 5px;
        }
      }
    }
  }
}

.list {
  width: 100%;
  height: 60vh;
  overflow-x: hidden;
}
// 评论返回顶部
.connmentBox {
  height: 54vh;
  overflow-x: hidden;
  // margin-bottom: 60px;
}

// 收藏按钮
.isSubRed {
  color: #e53f3f;
}
// 歌手专辑
.tableBox {
  height: 52vh;
  overflow-x: hidden;
}
// 歌手详情
.singer {
  text-indent: 2em;
  font-size: 16px;
  color: #373737;
  line-height: 35px;
}
</style>
